import React from 'react';
import GridLayout from 'react-grid-layout';
import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';
import './App.css'; // 自定义样式文件

// 假设这是你的 JSON 数据
const data = [
    { "number": "001", "size": "M", "status": "配備待ち" },
    { "number": "003", "size": "M", "status": "検証進捗 1/7" },
    { "number": "001", "size": "M", "status": "配備待ち" },
    { "number": "001", "size": "M", "status": "配備待ち" },
    { "number": "002", "size": "L", "status": "完了" },
    { "number": "002", "size": "L", "status": "配備待ち" },
    { "number": "002", "size": "L", "status": "完了" },
    { "number": "002", "size": "L", "status": "配備待ち" }
];

// 根据屏幕宽度动态计算列数
const getCols = () => {
    const width = window.innerWidth;
    if (width < 600) return 1;
    if (width < 900) return 2;
    return 3;
};

// 计算布局，支持动态高度
const getLayout = (data, cols) => {
    let layout = [];
    let yPos = Array(cols).fill(0); // 存储每一列的高度

    data.forEach((item, index) => {
        const col = index % cols; // 根据列数分配
        const w = 1; // 网格项的宽度
        const baseHeight = 1; // 基本高度

        // 根据 number 值设置高度
        const h = item.number === "002" ? baseHeight * 2.5 : baseHeight;

        // 计算 y 位置
        const y = yPos[col];

        layout.push({
            i: index.toString(),
            x: col,
            y: y,
            w: w,
            h: h
        });

        // 更新当前列的高度
        yPos[col] += h;
    });

    return layout;
};

const MyGrid = () => {
    const [cols, setCols] = React.useState(getCols());

    // 监听窗口大小变化
    React.useEffect(() => {
        const handleResize = () => {
            setCols(getCols());
        };
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    return (
        <GridLayout
            className="layout"
            layout={getLayout(data, cols)}
            cols={cols}
            width={window.innerWidth}
            // 注意：不设置 rowHeight，允许内容自适应高度
        >
            {data.map((item, index) => {
              const isFinish=item.status==="完了"
              const isCheck=item.status==="検証進捗 1/7"
              return (
                <div key={index.toString()} className={`grid-item ${index%2===0?'even':'odd'}`}>
                    <div className="item-content">
                          <div className='number'>{item.number}</div>
                          <div className={`status ${isFinish?'finish':''} ${isCheck?'check':''}`}>{item.status}</div>
                    </div>

                    {/* line */}
                    <div className='rowLine'>
                      <div className='rowLine_leftCircle Circle'></div>
                      <div className='rowLine_rightCircle Circle'></div>
                    </div>
                    <div  className='columnLine'>
                    <div className='columnLine_topCircle Circle'></div>
                    <div className='columnLine_bottomCircle Circle'></div>
                    </div>
                      
                </div>
            )
            })}
        </GridLayout>
    );
};

export default MyGrid;
